<!--
 * @Author: your name
 * @Date: 2020-11-16 16:19:12
 * @LastEditTime: 2020-11-16 20:23:59
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \H5 2010 studyd:\H5 2010 练习\第二阶段\DAY 16\tab栏切换.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 800px;
            height: 600px;
            margin: 100px auto;
        }

        ul,
        ol {
            list-style: none;
        }

        ul {
            width: 100%;
            height: 80px;
            display: flex;
        }

        ul li {
            flex: 1;
            height: 80px;
            line-height: 80px;
            text-align: center;
            background-color: #ccc;
        }

        ul li.active {
            background-color: orange;
        }

        ol {
            height: 520px;
            position: relative;
        }

        ol li {
            position: absolute;
            height: 520px;
            line-height: 520px;
            text-align: center;
            background-color: deepskyblue;
            width: 100%;
            height: 100%;
        }

        ol li.active {
            z-index: 1;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li class="active">桐生一马</li>
            <li>真岛吾朗</li>
            <li>冴岛大河</li>
            <li>锦山彰</li>
        </ul>
        <ol>
            <li class="active">桐生一马</li>
            <li>真岛吾朗</li>
            <li>冴岛大河</li>
            <li>锦山彰</li>
        </ol>
    </div>
</body>

<script>
    function Tab() {
        this.ul = document.querySelector('ul')
        this.uli = document.querySelectorAll('ul li')
        this.ol = document.querySelector('ol')
        this.oli = document.querySelectorAll('ol li')
    }

    Tab.prototype.init = function () {

    }
    Tab.prototype.bindEvent = function () {
        uli = this.uli
        oli = this.oli

        // for 循环 普通函数
        for (let i = 0; i < uli.length; i++) {
            uli[i].onclick = function () {
                for (j = 0; j < uli.length; j++) {
                    uli[j].className = ''
                    oli[j].className = ''
                    
                }
                uli[i].className = 'active'
                oli[i].className = 'active'
            }
        }
    }

    const tab = new Tab()
    tab.bindEvent()
    
</script>

</html>